<template>
  <div class="layout-content fix-iphone" @click.stop="execute(openSystem)">
    <van-nav-bar
        v-if="showNavbar"
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="handleBack"
    />
    <PageStackRouterView />
<!--    <router-view v-slot="{ Component }">-->
<!--      <transition :name="transitionName || ''">-->
<!--        <keep-alive :include="includeList">-->
<!--          <component :is="Component" />-->
<!--        </keep-alive>-->
<!--      </transition>-->
<!--    </router-view>-->
    <Tabbar></Tabbar>
    <van-back-top  bottom="15vh"/>
  </div>
</template>

<script setup lang="ts">
import Dialog from '@/components/PwdDialog/index'
import useSystem from '@/hooks/useSystem'
import {useAppStore} from "@/store/app";
import {storeToRefs} from "pinia";
import Tabbar from "@/components/Tabbar/index.vue";
const { execute } = useSystem()
const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
// 拿出数据
// 结构重命名
const {active,tabList} = storeToRefs(appStore)

const title = computed(() => { return route.meta.title })
// 是否展示顶部导航栏
const showNavbar = computed(() => { return route.meta.showNavbar })
// 返回上一页
const handleBack = () => {
  router.back()
}
// 点击导航
const transitionName = ref('')

const includeList = ref([] as any)

watch(route, (v) => {
	//监听路由变化，把配置路由中keepAlive为true的name添加到include动态数组中
	if (v.meta.keepAlive && includeList.value.indexOf(v.name) === -1) {
		includeList.value.push(v.name)
	}
})

router.beforeEach((to: any, from: any) => {
	if (!to.meta.transition.enable) {
		transitionName.value = ''
	} else {
		if (to.meta.transition.name) {
			transitionName.value = to.meta.transition.name
		} else if (to.meta.index > from.meta.index) {
			transitionName.value = 'van-slide-left'
		} else if (to.meta.index < from.meta.index) {
			transitionName.value = 'van-slide-right'
		}
	}
})

// 调用系统信息
const openSystem = () => {
	Dialog.alert({
		title: '开发者模式',
		message: '请输入开发者密码',
		inputComplete: async (pwd: string) => {
			if (pwd === '960413') {
				Dialog.close()
				router.push('/system')
			}
		}
	})
}

</script>


<style lang="scss" scoped>
.layout-content {
	width: 100vw;
}
</style>
